<template>
	<view>
		<view class="fu-invoice-wrap">
		  <view class="flex fu-invoice-item">
		    <view class="fu-invoice-item-title text-333">
		      发票类型
		    </view>
        <view class="fu-invoice-item-info text-666">
          <text>普通发票</text>
        </view>
		  </view>
      <view class="flex fu-invoice-item">
        <view class="fu-invoice-item-title text-333">
          抬头类型
        </view>
        <view class="fu-invoice-item-info text-666">
          <label class="radio" @click="changeRise(1)">
            <radio class="radio-scale" color="#f02523" :checked='invoiceData.invoice_type == 1' style="transform: scale(0.7);" /><text style="margin-right: 10rpx;">个人或事业单位</text>
          </label>
          <label class="radio" @click="changeRise(2)">
            <radio class="radio-scale" color="#f02523" :checked='invoiceData.invoice_type == 2' style="transform: scale(0.7);" /><text>企业</text>
          </label>
        </view>
      </view>
      <view class="flex fu-invoice-item">
        <view class="fu-invoice-item-title text-333">
          发票抬头
        </view>
        <view class="fu-invoice-item-info text-666">
          <input type="text" class="" v-model="invoiceData.invoice_title" :placeholder="invoiceData.invoice_type == 1?'填写需要开具发票的姓名':'填写需要开具发票的企业名称'" />
        </view>
      </view>
      <view class="flex fu-invoice-item" v-show="invoiceData.invoice_type == 2">
        <view class="fu-invoice-item-title text-333">
          税号
        </view>
        <view class="fu-invoice-item-info text-666">
          <input type="text" class="" v-model="invoiceData.invoice_company_duty_paragraph" placeholder="纳税人识别号" />
        </view>
      </view>
      <view style="text-align: center;height: 60rpx;line-height: 60rpx;" @click="clickArrow" v-show="invoiceData.invoice_type == 2">
        <text :class="isClick?'cuIcon-fold':'cuIcon-unfold'"></text>
      </view>
      <block v-if="invoiceData.invoice_type == 2 && isClick">
        <view class="flex fu-invoice-item" >
          <view class="fu-invoice-item-title text-333">
            开户银行
          </view>
          <view class="fu-invoice-item-info text-666">
            <input type="text" class="" v-model="invoiceData.invoice_company_bank" placeholder="选填" />
          </view>
        </view>
        <view class="flex fu-invoice-item" >
          <view class="fu-invoice-item-title text-333">
            银行账号
          </view>
          <view class="fu-invoice-item-info text-666">
            <input type="text" class="" v-model="invoiceData.invoice_company_bank_num" placeholder="选填" />
          </view>
        </view>
        <view class="flex fu-invoice-item" >
          <view class="fu-invoice-item-title text-333">
            企业地址
          </view>
          <view class="fu-invoice-item-info text-666">
            <input type="text" class="" v-model="invoiceData.invoice_company_address" placeholder="选填" />
          </view>
        </view>
        <view class="flex fu-invoice-item" >
          <view class="fu-invoice-item-title text-333">
            企业电话
          </view>
          <view class="fu-invoice-item-info text-666">
            <input type="text" class="" v-model="invoiceData.invoice_company_phone" placeholder="选填" />
          </view>
        </view>
      </block>
		</view>
    <view class="fu-invoice-wrap" style="margin-top: 20rpx;">
      <view class="flex fu-invoice-item">
        <view class="fu-invoice-item-title text-333">
          发票内容
        </view>
        <view class="fu-invoice-item-info text-666">
          <text>明细</text>
        </view>
      </view>
    </view>
    <view class="font-24 text-999" >发票内容将显示详细商品名称与价格信息。</view>
    <view class="font-24 text-999" >部分商家可能开具发票内容为商品所属类别及价格信息，如有特殊需求，请向商家客服咨询。</view>
    <button  type="warn" class="submit-btn" @click="submitClick">
      <text>{{type == 1?'确认':'提交'}}</text>
    </button>
	</view>
</template>

<script>
	export default {
    props:{
      type:{
        type:Number,
        default:1
      },
      invoiceData:{
        type:Object,
        default:{
          invoice_type:1,//1个人，2企业
          invoice_title:'',//发票抬头
          invoice_company_duty_paragraph:'',//税号
          invoice_company_bank:'',//开户银行
          invoice_company_bank_num:'',//银行账号
          invoice_company_address:'',//企业地址
          invoice_company_phone:'',//企业电话
        }
      }
    },
		data() {
			return {
        
        isClick:false,//是否点击了箭头
			};
		},
    methods:{
      changeRise(type){
        this.invoiceData.invoice_type = type;
      },
      clickArrow(){
        this.isClick = !this.isClick;
      },
      submitClick(){
        if(!this.invoiceData.invoice_title.trim()){
          this.$message.info('请输入发票抬头');
          return;
        }
        if(this.invoiceData.invoice_type == 2){
          if(!this.invoiceData.invoice_company_duty_paragraph.trim()){
            this.$message.info('请输入税号');
            return;
          }
        }
        this.$emit('change',this.invoiceData);
      }
    }
	}
</script>

<style scoped lang="scss">
.fu-invoice-wrap{
  padding: 0 20rpx;
  box-sizing: border-box;
  background: #FFFFFF;
  border-radius: 24rpx;
}
.fu-invoice-item{
  height: 72rpx;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
  .fu-invoice-item-title{
    flex: 1;
  }
  .fu-invoice-item-info{
    font-size: 28rpx;
    flex: 2;
    text-align: right;
    input{
      font-size: 28rpx;
      text-align: right;

    }
  }
}
.font-24{
  font-size: 24rpx;
}
.submit-btn{
  border-radius: 48rpx;
  margin-top: 40rpx;
}
</style>
